<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>91人气</title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="js/animate.min.css" />
	</head>

	<body>
		<!-- 外套 -->
		<div id="wrap">

			<div class="waitao">

				<!-- 头部 -->
				<header>
					<div class="head-list">
						<p>91人气APP（商家版）</p>
						<ul class="head-list-right">
							<li>登录-注册</li>
							<li>帮助中心</li>
							<li style="border: none;">联系客服</li>
						</ul>
					</div>
				</header>
				<!-- 导航部分 -->
				<div id="nav">
					<div class="nav-center">
						<img src="http://s.91renqi.com/assets/4_0/img/logo_03.png" / class="p1">
						<div class="nav-1">
							<img src="http://s.91renqi.com/assets/4_0/img/logo_06.png" />
						</div>

						<ul class="nav-2">
							<li>
								<a href="#">首页</a>
							</li>
							<li class="posit">
								<a href="#">优势</a>
								<img src="img/hot.png" alt="" />
							</li>
							<li>
								<a href="#">业务</a>
							</li>
							<li class="posit">
								<a href="#">发现</a>
								<img src="img/hot.png" alt="" />
							</li>
							<li>
								<a href="#">更多</a>
							</li>
						</ul>
						<div class="nav-3">
							<button>登录</button>
							<a href="#">注册</a>
						</div>
					</div>
				</div>

			</div>

			<!-- 应该可以让地球铺满了 -->

			<div class="mb"></div>

			<!-- 呢个比较炫酷的地球 -->
			<div class="globe">
				<div class="globe-center">
					<h1>从<span>0</span>开始到全类<span>top</span></h1>
					<p>精细化电商运营辅助平台</p>
					<ul class="wai">
						<li>贴身打造DIY运营方案</li>
						<li>各类电商资源链式服务</li>
						<li>直通车提高质量分降低ppc</li>
						<li>诊断店铺提升与转化</li>
					</ul>

					<div class="q1">
						<div class="q2"></div>
						<div class="q3">
							<a class="q1"></a>
						</div>
						<div class="q4"><i></i></div>
						<div class="q5"><i></i></div>
						<div class="q6"><i></i></div>
						<img src="img/dfsgdx.png" class="p7" />
						<div id="wave"></div>
					</div>
				</div>
			</div>

			<!-- 下一个图片 -->
			<div class="two-bg">
				<div class="two-banner">
					<span>趋势</span>
					<h1>91人气，你的无现优化大师</h1>
					<p>无现计划加权,提高点击率,优化质量分,降低损耗成本<br> 更聚焦！更具针对性！不把主力放在无限趋势的电商,都是耍流氓
						<br> 无线流量来源占比87%,成交占比80%，无县时代屏幕虽小,但也带来一个优势
					</p>
				</div>
				<!-- 手机呢玩意儿 -->

			</div>

			<!-- 第三章图片 -->
			<div class="three-bg">
				<div class="three-banner">
					<span>业务</span>
					<h1>辅助，您的整条链我们包了</h1>
					<p>买号多重审、任务质量严、实时监控一览无余.<br> 原纬度购物行为,不一般的深度刘侃,随时随地查询任务进展.
						<br> 关于任务质量问题:人工审核+商家自审+逻辑性限制买号领取任务
					</p>
				</div>
			</div>

			<!-- 传说中的第四张图片 -->
			<div class="fore-bg">
				<div class="fore-banner">
					<span>活动</span>
					<h1>节约运营成本，为您保驾护航</h1>
					<p>活动多元化，带给商家更愉悦的体验,毕竟贴心,毕竟为你<br> 每日常规活动,每月主题活动,天天有福利,月月有惊喜
						<br>
					</p>
				</div>
			</div>

			<ul class="v1">
				<li class="a1"></li>
				<li class="a2"></li>
				<li class="a3"></li>
				<li class="a4"></li>
			</ul>


			<div class="two-banner-main">
				<div class="lateral-phone">
					<div class="phone-inside">
						<ul>
							<li class="b1"></li>
							<li class="b2"></li>
							<li class="b3"></li>
						</ul>
					</div>
				</div>
			</div>
		
		</div>

	</body>

	<script src="../jquery-3.1.1.js"></script>

	<script>
		$(function() {

		function down(){
			$(".phone-inside ul").animate({
				top:"-="+270
			},30)
		}
			
		function up(){
			$(".phone-inside ul").animate({
				top:"+="+270
			},30)
		}

		
		
		window.onscroll = function(){
			var top = $(document).scrollTop()
			 console.log(top)
			 if(top > window.innerHeight-150){
			 	$(".two-banner-main").show()
			 }else{
			 	$(".two-banner-main").hide()
			 }
		}

		

		 var num = 0;
 var scrollFunc = function(e) {
     ee = e || window.event;
     if (e.wheelDelta) { //IE/Opera/Chrome  
         // console.log(e.wheelDelta);
         if (e.wheelDelta == -150) {
             //向下
            
             if (6 == num) {
                 num = 6;
             } else {
                 num++;
                 if(num%2==0 && num > 2){
                 	down()
                 }
                 
                 $(document).scrollTop((window.innerHeight * (num / 2)-150));
             }
         } else {
             // 向上
             if (0 == num) {
                 num = 0;
             } else {
                 num--;
                 up()
			if(num%2==0 && num > 2){
				up()
			}
                 
                 $(document).scrollTop((window.innerHeight * (num / 2)));
             }
         }
     } else if (e.detail) { //Firefox  
         console.log(e.detail);
     }
 }

 /*注册事件*/
 if (document.addEventListener) {
     document.addEventListener('DOMMouseScroll', scrollFunc, false);
 } //W3C  
 window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome/Safari

			//			$(".a1").click(function(){
			//				$(".globe").show()
			//				$(".two-bg").hide()
			//				$(".three-bg").hide()
			//				$(".fore-bg").hide()
			//			})
			//			
			//			
			//				$(".a2").click(function(){
			//					$(".globe").hide()
			//					$(".two-bg").show()
			//					$(".three-bg").hide()
			//					$(".fore-bg").hide()
			//				})
			//			
			//			
			//			$(".a3").click(function(){
			//					$(".globe").hide()
			//					$(".two-bg").hide()
			//					$(".three-bg").show()
			//					$(".fore-bg").hide()
			//				})
			//			
			//			
			//			$(".a4").click(function(){
			//					$(".globe").hide()
			//					$(".two-bg").hide()
			//					$(".three-bg").hide()
			//					$(".fore-bg").show()
			//				})

			function move() {
				$(".wai").animate({
					bottom: 10
				}, 2000, function() {
					$(".wai>li:first-child").appendTo(".wai")
					$(".wai").css("bottom", 0)
					move()
				})
			}
			move()
		})
	</script>

</html>